<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台</title>
  <link rel="stylesheet" href="../css/layui-v2.4.3/layui/css/layui.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <link rel="stylesheet" href="../css/manage.css">

  <script src="../js/request.js"></script>
  <script src="../js/manage_jumpwork.js"></script>
  <style>
    .table{
      margin: 20px;
    }
  </style>
  <script type="text/javascript">
  
  	$.removeCookie('admin');
	$.removeCookie('uId');
  </script>
</head>
<body class="layui-layout-body">
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">作品管理平台</div>
      <!-- 头部区域（可配合layui已有的水平导航） -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;">
            <img src="" class="layui-nav-img">
            信息科学与工程学院
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">基本资料</a></dd>
            <dd><a href="">安全设置</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="#" onclick="OutLogin()">退出登录</a></li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black" >
      <div class="layui-side-scroll" >
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="./manageworks.html">作品发布</a>
          </li>
          <li class="layui-nav-item">
            <a href="./manage.html" onclick="jumpcatch()">比赛发布</a>
          </li>
          <li class="layui-nav-item"><a href="./managestudent.html" onclick="jumpStudent()">学生管理</a></li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 0px;">
        <div id="manages">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">发布作品</button>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search" id="searchStudent"
                      onkeyup="myFunction()">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
          </form>
          </div>
          <div class="row works" id="allworks">
            <table class="table table-hover table-striped">
              <thead>
                 <tr>
                   <th>学号</th>
                   <th>姓名</th>
                   <th>作品名称</th>
                   <th>id</th>
                   <th>操作</th>
                 </tr>
              </thead>
              <tbody id="studentTable">
              
                 
                 
                 
                 
                  
              
              </tbody>
          </table>
          </div>
         
      </div>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      琴理工作室作品管理平台
    </div>
  </div>
  <script src="../layui-v2.4.3\layui/layui.js"></script>
 
  <script>
    //    var name = document.getElementById("name").value;
    //    console.log(name);
    //  $('#sub').click = ($ajax({
    //     method:"POST",
    //     url:"http://qlapi.sylu.edu.cn/mock/146/api/addarticle",
    //     data:{
    //           "name":"name",
    //           "studentCount":"",
    //           "workName":"",
    //           "speakWork":"",
    //           "workImg":"",
    //           "inputfile":"",

    //     }
    //   })
    //  )


    var imasrc;
    var title;
    var numzan;
    var time;
    var touxiang;
    var workerName;
    var studentID;

    var num;
    var id;
    $.ajax({
      type: "get",
      url: "http://39.97.237.157:8081/api/getallarticlesbyhot",
      success: fill,
      data: { id: id }
    });

    function fill(data) {
      console.log(data);
      console.log(data.msg);
      console.log(data.code);
      console.log(data.data.length);
      console.log(data.data[0].id);


      num = data.data.length;
      for (var i = 0; i < num; i++) {
        // imasrc = data.data[i].cover;
        imasrc = data.data[i].cover;
        workerName = data.data[i].name;
        numzan = data.data[i].lNumber;
        time = '2020/1/22';
        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
        title= data.data[i].proName;
        studentID = data.data[i].studyNo;
        id = data.data[i].proId;
        if(title.length>6){
          titleName=title[0]+title[1]+title[2]+title[3]+'.......'
        }else{
          titleName=title;
        }
        
        //  $('.works').append('<div class="col-md-4 Work"><div class="thumbnail workOne"  onclick="jump(' + id + ');" id="' + id + '"><img alt="300x200" src="' + imasrc + '" class="images" /> <div class="caption"><p>' + title + '</p><div class="zanTime"><span><p class="zan">&#10084;</p><p class="zanShu">' + numzan + '</p></span><span>' + time + '</span></div> <div class="nameID"> <span><img alt="14x14" src="' + touxiang + '" class="img-circle touxiang" />' + workerName + '</span><span class="ID"> ' + studentID + '</span></div><div class="delete"></div></div></div> </div>');
        $('#studentTable').append('  <tr> <td>'+studentID+'</td> <td>'+workerName+'</td> <td>'+titleName+'</td> <td>'+id+'</td><td><button onclick="delet(' +id+ ')">删除</button></td></tr>');
      }
    }
    function delet(count) {
      $.post("http://39.97.237.157:8081/api/deletearticle",
        {
          // 提交时携带的参数
          id: count
          // workname:workname,
          // speakwork:speakwork,
          // inputfile:inputfile
        },
        // 回调函数,data是服务器返回的数据
        function (data, status) {
          var dataObj = data;//转换为json对象
          // dataObj.code是服务器返回的一个数据
          if (dataObj.code !=200) {
            alert("删除失败")
          } else {
            alert(dataObj.msg);
            return;
          }
        });
    }

    //跳转
    function jump(id) {
      window.open("WorksOne.html?id=" + id, "_blank");
    }


    //搜索
    $("input[type=button]").click(function () {
      var txt = $("input[type=text]").val();
      //val() 方法返回或设置被选元素的值。
      if ($.trim(txt) != "") {//$.trim(txt)删除字符串开始和末尾的空格
        $(".workOne").hide().filter(":contains('" + txt + "')").show();
        //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        //:contains() 选择器选取包含指定字符串的元素。
        if ($(".workOne").is(":visible")) {
          // $(".works").append("抱歉没有找到您搜索的内容");
          $(".prompt").text("找到啦！").show().delay(1000).fadeOut();
        } else {
          $(".prompt").text("抱歉没有找到您搜索的内容").show().delay(1000).fadeOut();

        }

      }
      else {
        $(".prompt").text("请输入您要搜索的内容").show().delay(1000).fadeOut();
      }
    });

 // 搜索功能
 function myFunction() {
        // 声明变量
        var input, filter, table, tr, td, i;
        input = document.getElementById("searchStudent");
        filter = input.value.toUpperCase();
        table = document.getElementById("studentTable");
        tr = table.getElementsByTagName("tr");

        // 循环表格每一行，查找匹配项
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }


  </script>
   <!-- 模态框（Modal） -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            作品发布
          </h4>
        </div>
        <div class="modal-body">
          <form role="form" id="submitWorks" method="POST" action="http://39.97.237.157:8081/api/addarticle"
            enctype="multipart/form-data">
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name">
              <label for="name">学号</label>
              <input type="text" class="form-control" placeholder="请输入学号" name="studyNo">
              <label for="name">作品名称</label>
              <input type="text" class="form-control" placeholder="请输入作品名称" id="workName" name="proName">
              <label for="name">作品简介</label>
              <textarea class="form-control" rows="3" placeholder="作品简介" id="speakWork" name="introduction"></textarea>
              <label for="name">作品封面</label>
              <label for="inputfile" id="workImg">输入文件</label>
              <input type="file" id="inputfile" name="cover">
            </div>
            <div class="form-group">
              <label for="name">作品内容</label>
              <label for="inputfile">输入文件</label>
              <input type="file" id="inputfiles" name="content">
              <p class="help-block"></p>
            </div>
            <div class="checkbox">

            </div>
            <input type="submit" name="" id="sub" value="提交">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div><!-- /.modal-content -->
    </div>
    <!-- /.modal -->
  </div>
</body>

</html>